<template>
	<div>
		<div class="p-4 bg-white" v-if="URLShow">
			<div class="flex">
				<div class="w-60">
					<t-select placeholder="请选择项目状况" :options="options" v-model="selectValue" :onChange="selectChange"></t-select>
				</div>
				<div class="w-60 ml-4">
					<t-input placeholder="请输入项目名称" v-model="projectName">
						<template #suffixIcon><search-icon /></template>
					</t-input>
				</div>
				<t-button class="ml-4" :disabled="!projectName" @click="getProjectName">确定</t-button>
			</div>
			<div class="flex mt-4">
				<t-button theme="success" @click="AddProject" v-if="isButtonAuthority('添加项目')">添加项目</t-button>
				<t-button class="ml-4" theme="danger" :disabled="!selectedRowKeys.length" @click="deleteProjectList" v-if="isButtonAuthority('删除项目')">删除</t-button>
			</div>
			<t-table
			class="mt-4"
			:bordered="true"
			rowKey="project_id"
			:columns="columns"
			:data="tableData"
			:onPageChange="onPageChange"
			:pagination="{ total: listNumber }"
			:selected-row-keys="selectedRowKeys"
			@select-change="rehandleSelectChange"
			@sort-change="sortChange"
			:displayColumns.sync="displayColumns"
			:columnController="{}"
			>
				<template #project_name="{row}">
					<p class="cursor-pointer hover:text-blue-500" @click="goProjectInfo(row.project_id)">{{row.project_name}}</p>
				</template>
				<template #project_type="{row}">
					<p v-if="row.project_type == 0">公司项目</p>
					<p v-if="row.project_type == 1">客户项目</p>
				</template>
				<template #project_state="{row}">
					<span v-if="row.project_state == 0" class="text-blue-500 rounded bg-blue-50" style="padding: 2px 6px 2px 6px;">进行中</span>
					<span v-if="row.project_state == 1" class="text-orange-500 rounded bg-orange-50" style="padding: 2px 6px 2px 6px;">修改中</span>
					<span v-if="row.project_state == 2" class="text-green-500 rounded bg-green-50" style="padding: 2px 6px 2px 6px;">已完结</span>
					<span v-if="row.project_state == 3" class="text-red-500 rounded bg-red-50" style="padding: 2px 6px 2px 6px;">已流单</span>
				</template>
				<template #operate="{row}">
					<div class="flex">
						<t-button variant="text" theme="primary" @click="goProjectInfo(row.project_id)">详情</t-button>
						<t-button class="ml-2" variant="text" theme="danger" @click="deleteProject(row.project_id)" v-if="isButtonAuthority('删除项目')">删除</t-button>
					</div>
				</template>
			</t-table>
		</div>
		<router-view v-if="sonURLShow" class="w-full h-full"></router-view>
	</div>
</template>

<script>
	import { SearchIcon } from 'tdesign-icons-vue'
	import { isButtonAuthority } from '@/unit/buttonAuthority'
	
	const getColumns = (isFixedColumn) => [
		{ colKey: 'row-select', type: 'multiple'},
		{ colKey: 'project_id', title: '项目编号', sorter: true, sortType: 'all' },
		{ colKey: 'project_name', title: '项目名称', width: 240 },
		{ colKey: 'project_type', title: '项目类型', sorter: true, sortType: 'all' },
		{ colKey: 'project_start_date', title: '启动日期', sorter: true, sortType: 'all' },
		{ colKey: 'project_days', title: '项目时长/天', sorter: true, sortType: 'all' },
		{ colKey: 'project_people_number', title: '项目人数', sorter: true, sortType: 'all' },
		{ colKey: 'project_state', title: '项目状况', sorter: true, sortType: 'all' },
		{ colKey: 'project_creator_name', title: '创建人' },
		{ colKey: 'project_creator_date', title: '创建时间', sorter: true, sortType: 'all' },
		{ colKey: 'operate', title: '操作' }
	]
	
	// 节流函数
	let flag = true
	const throttle = (fn, delay = 200) => {
		if (!flag) { return }
		flag = false
		setTimeout(() => {
			fn()
			flag = true
		}, delay)
	}
	
	export default {
		components: {
			SearchIcon,
		},
		name: 'ProjectList',
		data() {
			return {
				tableData: [],
				listNumber: 0,
				selectedRowKeys: [],
				page: { page_num: 1, page_size: 10 },
				options: [
					{value: 5, label: '全部'},
					{value: 0, label: '进行中'},
					{value: 1, label: '改稿'},
					{value: 2, label: '完结'},
					{value: 3, label: '流单'}
				],
				selectValue: 5,
				projectName: '',
				displayColumns: ['project_id', 'project_name', 'project_type', 'project_start_date', 'project_days', 'project_people_number', 'project_state', 'project_creator_name', 'project_creator_date', 'operate']
			}
		},
		computed: {
			// 表头配置
			columns(){
				return getColumns(false)
			},
			// 当前页显示
			URLShow(){
				if(this.$route.meta.auth){
					return true
				} else {
					return false
				}
			},
			// 子页面显示
			sonURLShow(){
				if(!this.$route.meta.auth){
					return true
				} else {
					this.getProjectList(this.page)
					return false
				}
			}
		},
		methods: {
			// 权限审核
			isButtonAuthority(str){
				return isButtonAuthority(str)
			},
			// 查看项目详情
			goProjectInfo(id){
				this.$router.push({
					name: 'ProjectInfo',
					query: {
						project_id: id
					}
				})
			},
			// 根据项目名称查询
			getProjectName(){
				let query = {
					page_num: this.page.page_num,
					page_size: this.page.page_size,
					project_state: this.selectValue,
					project_name: this.projectName
				}
				this.$store.dispatch('project/stateProjectList', query).then(res => {
					if(res.status == 0){
						this.tableData = res.data
						this.sortChange(this.sort)
						this.listNumber = res.listNumber
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 状态选择框变化
			selectChange(){
				if(this.selectValue === 5){
					this.projectName = ''
					this.getProjectList(this.page)
				} else {
					let query = {
						page_num: this.page.page_num,
						page_size: this.page.page_size,
						project_state: this.selectValue,
						project_name: this.projectName
					}
					this.$store.dispatch('project/stateProjectList', query).then(res => {
						if(res.status == 0){
							this.tableData = res.data
							this.sortChange(this.sort)
							this.listNumber = res.listNumber
						} else {
							this.$message.error(res.message)
						}
					})
				}
			},
			// 单个删除
			deleteProject(id){
				const obj = { project_id: id}
				this.$store.dispatch('project/deleteProject', obj).then(res => {
					if(res.status == 0){
						this.getProjectList(this.page)
						this.$message.success(res.message)
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 批量删除
			deleteProjectList(){
				let str = ''
				for(let i = 0 ; i < this.selectedRowKeys.length ; i++){
					if(i === (this.selectedRowKeys.length - 1)){
						str = str + this.selectedRowKeys[i]
					} else {
						str = str + this.selectedRowKeys[i] + '@'
					}
				}
				const obj = { project_ids: str}
				this.$store.dispatch('project/deleteProjectList', obj).then(res => {
					if(res.status == 0){
						this.getProjectList(this.page)
						this.$message.success(res.message)
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 排序按钮改变时
			sortChange(sort) {
				this.sort = sort;
				if (sort) {
					this.tableData = this.tableData
						.concat()
						.sort((a, b) => (sort.descending ? b[sort.sortBy] - a[sort.sortBy] : a[sort.sortBy] - b[sort.sortBy]));
				} else {
					this.tableData = this.tableData.concat();
				}
			},
			// 跳转添加项目
			AddProject(){
				this.$router.push({
					name: 'AddProject'
				})
			},
			// 复选框变化
			rehandleSelectChange(value, { selectedRowData }){
				this.selectedRowKeys = value
			},
			// 分页变化
			onPageChange({current, pageSize}){
				this.page.page_num = current
				this.page.page_size = pageSize
				throttle(() => {
					this.selectChange()
				})
			},
			// 分页查询项目列表
			getProjectList(query){
				this.$store.dispatch('project/getProjectList', query).then(res => {
					if(res.status == 0){
						this.tableData = res.data
						this.sortChange(this.sort)
						this.listNumber = res.listNumber
					}
				})
			}
		},
		created() {
			this.getProjectList(this.page)
			// 权限管理,当没有对应权限时不展示对应的列
			if(isButtonAuthority('删除项目')){
				this.displayColumns.push('row-select')
			}
		}
	}
</script>